<template> 
  <div class="internship-container"> 
    <el-card shadow="never"> 
      <!-- 搜索栏 --> 
      <div class="filter-header"> 
        <el-input 
          v-model="filter.id"  
          placeholder="编号" 
          style="width: 100px" 
          class="filter-item" 
        /> 
        <el-input 
          v-model="filter.name"  
          placeholder="名称" 
          style="width: 120px; margin-left: 10px" 
          class="filter-item" 
        /> 
        <el-input 
          v-model="filter.studentName"  
          placeholder="学生姓名" 
          style="width: 120px; margin-left: 10px" 
          class="filter-item" 
        /> 
        <el-input 
          v-model="filter.company"  
          placeholder="实习单位" 
          style="width: 140px; margin-left: 10px" 
          class="filter-item" 
        /> 
        <el-button type="primary" style="margin-left: 15px" @click="search">搜索</el-button> 
        <el-button style="margin-left: 10px" @click="reset">重置</el-button> 
      </div> 
 
      <!-- 数据表格 --> 
      <el-table 
        :data="filteredTableData" 
        style="width: 100%" 
        header-row-class-name="table-header" 
      > 
        <el-table-column prop="id" label="编号" width="80" align="center" /> 
        <el-table-column prop="name" label="名称" width="120" /> 
        <el-table-column prop="start_time" label="开始时间" width="120" /> 
        <el-table-column prop="end_time" label="结束时间" width="120" /> 
        <el-table-column prop="studentId" label="学生学号" width="120" align="center" /> 
        <el-table-column prop="studentName" label="学生姓名" width="120" /> 
        <el-table-column prop="company" label="实习单位名称" width="150" /> 
        <el-table-column prop="companyInfo" label="实习单位简介" width="150"> 
          <template slot-scope="scope">{{ scope.row.companyInfo  || '-' }}</template> 
        </el-table-column> 
        <el-table-column prop="weeklyScore" label="周报成绩" width="100" align="center" /> 
        <el-table-column prop="summaryScore" label="总结成绩" width="100" align="center" /> 
        <el-table-column prop="totalScore" label="总成绩" width="100" align="center" /> 
        <el-table-column prop="finalScore" label="最终成绩" width="120" align="center"> 
          <template slot-scope="scope">{{ scope.row.finalScore  || '-' }}</template> 
        </el-table-column> 
      </el-table> 
 
      <!-- 分页信息 --> 
      <div class="pagination-info"> 
        第 1 到 {{ filteredTableData.length  }} 条，共 {{ filteredTableData.length  }} 条记录。 
      </div> 
    </el-card> 
  </div> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      filter: { 
        id: '', 
        name: '', 
        studentName: '', 
        company: '' 
      }, 
      originalTableData: [ 
        { 
          id: 3, 
          name: '生产实习', 
          start_time: '2022-01-02', 
          end_time: '2023-02-28', 
          studentId: '1', 
          studentName: '沿停', 
          company: '华为', 
          companyInfo: '无', 
          weeklyScore: '21', 
          summaryScore: '100', 
          totalScore: '68.40', 
          finalScore: '无' 
        }, 
        { 
          id: 5, 
          name: '生产实习', 
          start_time: '2022-01-02', 
          end_time: '2023-02-28', 
          studentId: '48', 
          studentName: '王旭', 
          company: '华为', 
          companyInfo: '无', 
          weeklyScore: '0', 
          summaryScore: '0.00', 
          totalScore: '无', 
          finalScore: '无' 
        } 
      ], 
      filteredTableData: [] 
    }; 
  }, 
  created() { 
    this.filteredTableData  = this.originalTableData;  
  }, 
  methods: { 
    search() { 
      this.filteredTableData  = this.originalTableData.filter(item  => { 
        return ( 
          (this.filter.id  === '' || item.id.toString().includes(this.filter.id))  && 
          (this.filter.name  === '' || item.name.includes(this.filter.name))  && 
          (this.filter.studentName  === '' || item.studentName.includes(this.filter.studentName))  && 
          (this.filter.company  === '' || item.company.includes(this.filter.company))  
        ); 
      }); 
    }, 
    reset() { 
      this.filter  = { 
        id: '', 
        name: '', 
        studentName: '', 
        company: '' 
      }; 
      this.filteredTableData  = this.originalTableData;  
    } 
  } 
}; 
</script> 
 
<style scoped> 
.internship-container { 
  padding: 20px; 
} 
 
.filter-header { 
  display: flex; 
  align-items: center; 
  margin-bottom: 20px; 
} 
 
.filter-item { 
  margin-left: 10px; 
} 
 
.table-header th { 
  background-color: #f5f7fa !important; 
  font-weight: 600; 
} 
 
.pagination-info { 
  margin-top: 15px; 
  color: #909399; 
  font-size: 13px; 
  text-align: center; 
} 
 
.el-table .cell { 
  white-space: nowrap; 
} 
</style> 